<template>
  <div class="app-container calendar-list-container">
    <el-table :key='tableKey' :data="list"  v-loading="listLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row style="width: 100%">
      <el-table-column v-if='showAllDel' type="selection" width="55" />
      <el-table-column min-width="120" align="center" label="院校 ID" prop="checkId" width="150" />
      <el-table-column min-width="120" align="center" label="院校名称" prop="checkName" width="300" />  
      <el-table-column min-width="160" align="center" label="市场人员" prop="checkMname" />
      <el-table-column min-width="160" align="center" label="审核状态" :formatter="ifendcase" />
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="{row}">
          <el-button size="small" @click="handleModifyStatus(row)" type="primary">操作</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 编辑窗口表单 -->
    <el-dialog title="编辑院校资料" :visible.sync="dialogFormVisible" center v-if="dialogFormVisible" class="dialogWtgth">
        <el-form :model="temp" ref="ruleForm" class="form">
          <el-form-item label="院校名称" label-width="80px">
            <el-input v-model="temp.checkName" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校性质" label-width="80px">
            <el-input v-model="temp.checkAttr" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校类型" label-width="80px">
            <el-input v-model="temp.checkLevel" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校特色" label-width="80px">
            <el-input v-model="temp.checkFeature" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校地址" label-width="80px">
            <el-input v-model="temp.checkAddress" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校网站" label-width="80px">
            <el-input v-model="temp.checkWebsite" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="院校电话" label-width="80px">
            <el-input v-model="temp.checkTelephone" onfocus="this.blur()"></el-input>
          </el-form-item>
          <el-form-item label="所属省份" label-width="80px">
            <el-input v-model="temp.checkProvince" onfocus="this.blur()"></el-input>
          </el-form-item>

          <el-form-item label="院校介绍" label-width="80px">
            <el-input  type="textarea" :rows="15"  v-model="temp.checkIntroduction" class="textarea" onfocus="this.blur()"> </el-input>
          </el-form-item>
          <el-form-item label="招生简章" label-width="80px">
            <el-input  type="textarea" :rows="12"  v-model="temp.checkCatalog" class="textarea" onfocus="this.blur()"> </el-input>
          </el-form-item>
          <el-form-item>
            <div class="audit">
              <div>
                <el-button type="success" @click="pass" round icon="el-icon-check">审 核</el-button>
                <el-button type="danger"  @click="nopass" round icon="el-icon-close">驳 回</el-button>
              </div>
              <div class="btnClose">
                <el-button @click="dialogFormVisible = false" type="primary" round  icon="el-icon-close">关闭</el-button>
              </div>
          </div>
          </el-form-item>
          <el-form-item label="审核备注" label-width="80px">
            <el-input type="textarea" :rows="4" placeholder="请输入审核备注" v-model="temp.overrule" class="textarea"> </el-input>
          </el-form-item>
        </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { getId_audit, getList_audit, pass, nopass, update } from '@/api/academy'
import Tinymce from '@/components/Tinymce'
import { getToken } from '@/utils/auth' // 验权
import { mapGetters, mapActions } from 'vuex'

export default {
  components: { Tinymce },
  name: 'audit',
  data() {
    return {
      headers:{},
      list: null,
      total: null,
      listLoading: true,
      showAllDel: false,
      //获取用户id
      listQuery: {
        mid: this.$store.state.user.id,
        name: this.$store.state.user.name,
        pageNo: 1,
        pageSize: 10
      },
      temp: {
        labels: []
      },
      dialogFormVisible: false,
      tableKey: 0
    }
  },
  mounted() {
    this.getList()
    this.headers = { accessToken:getToken() }
  },

  computed: {
    ...mapGetters(['schoolsByTitleOptions'])
  },
  methods: {
    // 绑定一个方法转换 审核状态
    ifendcase(val){
      if(val.checkStatus == '0') { return '未审核' } else if(val.checkStatus == '1') { return '审核通过' } else { return '审核驳回' }
    },
    // 映射 Actions
    ...mapActions(['GetSchoolsByTitleOptions']),

    getSchoolOptions(title) {
      if (title) this.GetSchoolsByTitleOptions(title)
    },

    // 获取分页列表
    getList() {
      this.listLoading = true
      const params = this.listQuery
      getList_audit(params).then(response => {
        const { code, data: { total, list = [] } } = response
        if (code == 0) {
          this.total = total
          this.list = list
          this.listLoading = false
        }
      }).catch(err => {
        this.listLoading = false
      })
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row) { //点击查看
      getId_audit(row.id).then(res => { // 获取详情
        if(res.code == 0){
          this.temp = res.data
          this.temp['id'] = row.id
          this.dialogFormVisible = true
        }
      }).catch(err => {
      })
    },

    // 管理人员审核通过
    pass() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { temp } = this
          const params = {}
          params['id'] = this.temp.id
          params['checkerId'] = this.listQuery.mid
          params['checker'] = this.listQuery.name
          params['overrule'] = temp.overrule
          update(params).then(response => {
            const { code, message } = response
            if (code == 0) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message({
                title: '失败',
                message: message,
                type: 'error',
                duration: 2000
              })
            }
          }).catch(err => {
          })
        }
      })
    },
    // 管理人员驳回
    nopass(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { temp } = this
          const params = {}
          params['id'] = this.temp.id
          params['checkerId'] = this.listQuery.mid
          params['checker'] = this.listQuery.name
          params['overrule'] = temp.overrule
          if(temp.overrule == '' || temp.overrule == null){
            this.$message({
              title: '失败',
              message: `请填写驳回原因`,
              type: 'error',
              duration: 2000
            })
            return
          }
          nopass(params).then(res => {
            if(res.code == 0){
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '已驳回',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message({
                title: '失败',
                message: '请求失败',
                type: 'error',
                duration: 2000
              })
            }
          }).catch(err => {
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.icon-ctx {
  width: 160px;
  height: 80px;
  overflow: hidden;
  margin: 0 auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.app-container {
  padding: 20px;
}
.pagination-container {
  margin-top: 30px;
}
.form{
  width: 90%;
}
.audit{
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.textarea{
  padding-top: 10px;
}
.el-textarea__inner{
  border: 1px solid red;
}
.show{
  display: block;
}
.hidden{
  display: none;
}
</style>